<template>
  <div class="douyin">

    <div class="center">
      <left></left>
      <div class="right">

        <top></top>
        <div class="hei10"></div>
        <div style="padding: 20px; display: flex; align-items: center; cursor: pointer;" @click="$router.back(-1)">
          <i class="el-icon-arrow-left" style="margin-right: 10px;"></i> 商品卡单队列
        </div>

        <div class="kflexc" style="padding: 20px;">
          <!-- <div style="font-size: 12px;">
            时间范围:
            <el-date-picker style="margin-right: 20px; width: 470px;" v-model="times" @change="timeschange"
              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>

          <el-select filterable  v-model="form.goods_name" clearable placeholder="请选择商品">
              <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.title"></el-option>
          </el-select>
         <el-input style="width: 250px;margin-right: 20px;" v-model="form.share_name" placeholder="分销商"></el-input> -->
          <el-input style="width: 250px;margin-right: 20px;" v-model="form.source" placeholder="订单来源"></el-input>
          <el-input style="width: 250px;margin-right: 20px;" v-model="form.order_id" placeholder="订单ID"></el-input>
          <el-button type="danger" round @click="search()">搜索</el-button>
        </div>
<!--        <div class="kflexc" style="margin:0 20px 20px; gap: 20px;">
          <el-button type="danger" round @click="daochu()">导出明细</el-button>

          <el-upload class="upload-demo" action="#" :http-request="daoru" :show-file-list="false">
            <el-button type="primary" round>按导入提单</el-button>
          </el-upload>
          <el-upload class="upload-demo" action="#" :http-request="daoru2" :show-file-list="false">
            <el-button type="primary" round>按导入批量失败</el-button>
          </el-upload>
          <div style="color: #409EFF; cursor: pointer; font-size: 14px;" @click="xiazai">下载模版</div>
          <el-button type="danger" round @click="piliang()">批量提单</el-button>
          <el-button type="danger" round @click="piliang2()">批量生产失败</el-button>
        </div> -->
        <div class="con" v-loading="loading" style="margin:0 20px; ">

          <el-table :data="list" style="text-align: center;" align="center" border  @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55"> -->
            </el-table-column>
            <el-table-column label="订单ID">
              <template slot-scope="scope">
                <span>{{ scope.row.order_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单来源">
              <template slot-scope="scope">
                <span>{{ scope.row.source }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{ scope.row.ordered_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 20px; justify-content: flex-end;" class="flexc">
            <el-pagination style=" text-align: right;" background layout="total,prev, pager, next"
              :current-page="form.page" @current-change="fanye" :page-size="form.page_size"
              :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="全选" :visible.sync="log" :close-on-click-modal="false" width="600px">

      <el-radio v-model="xuanzequanbu.is_all" :label="0">选择单页</el-radio>
      <el-radio v-model="xuanzequanbu.is_all" :label="1">选择全部</el-radio>

    	<div slot="footer" class="dialog-footer">
    		<el-button type="primary" @click="log = false">确认</el-button>
    	</div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import {daochupost,jiexiexcle} from '@/api'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      UploadExcelComponent
    },
    name: 'qudaoguanli',
    data() {
      return {
        xuanzequanbu:{
          order_ids:[],
          is_all:0,
          config_type:3
        },
        form: {
          start_time: "", //开始时间
          end_time: "", //结束时间
          goods_name: "", //商品名称
          source: "", //来源
          page: 1,
          page_size: 20,
          limit_type:2,
          page_id:this.$route.query.id,
          order_id:"",
          config_type:3
        },
        times: [],
        loading: true,
        list: "",
        total: 0,
        arr:[],
        xuanzhongarr:[],
        shopoptions:[],
        log:false
      }
    },
    created() {
      this.getlist()
      this.getshoplist()

    },
    methods: {
      xiazai:function(){
        location.href = 'https://file.storep.91haoka.cn/gantanhao/%E8%AE%A2%E5%8D%95%E9%98%9F%E5%88%97.xlsx?attname='
      },
      getshoplist(){
          axios.get('/api/gth/order-pages2?status=100&_page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.shopoptions = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daoru:function(file){
        let ff = jiexiexcle(file)
        ff.then(res=>{
          let arr = []
          res.forEach(item=>{
            arr.push(item['订单ID'])
          })
          let obj = {
            operation_type:1,
            ids:arr
          }
          axios.post('/api/pending_order/pending/import', obj)
            .then(response => {
              if (response.data.msg.code == 0) {
               this.$message({
                 message: '操作成功！',
                 type: 'success'
               });
               this.loading = true
               this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      daoru2:function(file){
        let ff = jiexiexcle(file)
        ff.then(res=>{
          let arr = []
          res.forEach(item=>{
            arr.push(item['订单ID'])
          })
          let obj = {
            operation_type:2,
            ids:arr
          }
          axios.post('/api/pending_order/pending/import', obj)
            .then(response => {
              if (response.data.msg.code == 0) {
               this.$message({
                 message: '操作成功！',
                 type: 'success'
               });
               this.loading = true
               this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      daochu:function(){
        let obj = {
          config_limit_type:3,
          channel_id:this.form.channel_id,
          product_id:this.form.product_id,
          limit_type:this.form.limit_type,
          start_time:this.form.start_time,
          end_time:this.form.end_time,
          goods_name:this.form.goods_name,
          share_name:this.form.share_name,
          source:this.form.source,
          order_id:this.form.order_id,
          page_id:this.$route.query.id,
        }
        daochupost('/api/pending_order/pending/export',obj)
      },
      handleSelectionChange:function(val){

        this.xuanzhongarr = []
        val.forEach(item=>{
          this.xuanzhongarr.push(item.order_id)
        })

        if(this.xuanzhongarr.length == this.list.length  && this.list.length > 0){
          this.log = true
        }
      },
      piliang:function(){
        this.xuanzequanbu.order_ids = this.xuanzhongarr
        if(this.xuanzequanbu.is_all == 1){
            this.xuanzequanbu.page_id = this.$route.query.id
        }
        axios.post('/api/pending_order/manual_order', this.xuanzequanbu)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.loading = true
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      piliang2:function(){
        this.xuanzequanbu.order_ids = this.xuanzhongarr
        if(this.xuanzequanbu.is_all == 1){
            this.xuanzequanbu.page_id = this.$route.query.id
        }
        axios.post('/api/pending_order/mark_production_failed',this.xuanzequanbu)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.loading = true
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      timeschange() {
        if (this.times != null) {
          this.form.start_time = this.times[0]
          this.form.end_time = this.times[1]
        } else {
          this.form.start_time = ''
          this.form.end_time = ''
        }
      },

      getlist: function() {

        axios.get('/api/pending_order/list/share/page', {
            params: this.form
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },


      deletes: function(id) {
        this.$confirm('确定要提单操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/pending_order/manual_order', {
              order_ids: [id]
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                this.loading = true
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.form.page = page
        this.getlist()
      },

      //搜索
      search: function() {
        this.form.page = 1
        this.loading = true
        this.getlist()
      },
    }
  }
</script>


<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
</style>
